@keyframes loadingbg {
    0% {
        height: 35%;
        width: 60%;
    }

    100% {
        height: 55%;
        width: 100%;
    }
}

@keyframes loadingbg2 {
    0% {
        transform: translateY(-1000px);

    }

    100% {
        transform: translateY(0);

    }
}


@keyframes loadingjb {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes loadingtxt {
    0% {
        opacity: 0;
        width: 0;

    }

    100% {
        opacity: 1;
    }
}

@keyframes loadingtxt2 {
    0% {
        opacity: 0;
        width: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes loadingsy {
    0% {
        opacity: 0;
        transform: translateY(-80px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);

    }
}

@keyframes loadinghead {
    0% {
        opacity: 0;
        transform: translateX(-80px) rotate(180deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(360deg);

    }
}

@keyframes loading5 {
    0% {
        transform: translateY(0);

    }

    4% {
        transform: translateY(7px);
    }

    10% {
        transform: translateY(-7px);
    }

    15% {
        transform: translateY(5px);
    }

    19% {
        transform: translateY(-5px);
    }

    22% {
        transform: translateY(3px);
    }

    24% {
        transform: translateY(-3px);
    }

    26% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}

.tenth {
    overflow: hidden;
    .cont {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #BA1819;
        position: relative;

        .c_top {
            height: 55%;
            width: 100%;
            background: url('./images/bg.png') no-repeat;
            background-size: 100% 100%;
            animation: loadingbg 1s;
            animation-fill-mode: forwards;
        }

        .tp_two {
            img {
                margin-left: -10px;
                height: 52.9%;
                width: 104%;
                position: absolute;
                top: 0;
                left: 0;
                border-radius: 0 0 50% 50%;
                transform: translateY(-1000px);

                animation: loadingbg2 1s 1s;
                animation-fill-mode: forwards;
            }

            .tp_three {
                background: url(./images/jinbian.png);
                background-size: cover;
                height: 1.23rem;
                width: 100%;
                position: absolute;
                top: 34.5%;
                left: 0;
                opacity: 0;
                background-size: 100% 100%;
                animation: loadingjb 1s 2s;
                animation-fill-mode: forwards;
                transform: rotate(-1deg);
            }
        }

        .c_btm {
            height: 45%;
            margin: 0 auto;

            .bt_top {
                width: 100%;
                display: flex;
                justify-content: center;

                span {
                    opacity: 0;
                }

                span:nth-child(2n+1) {
                    display: inline-block;
                    background: url(./images/text_left.png) no-repeat;
                    width: .47rem;
                    height: .23rem;
                    background-size: cover;
                    animation: loadingtxt 2s 4s;
                    animation-fill-mode: forwards;

                }

                span:nth-child(2) {
                    margin: 0 .1rem;
                    display: inline-block;
                    width: 1.8rem;
                    height: .67rem;
                    background: url(./images/text.png) no-repeat;
                    background-size: cover;
                    animation: loadingtxt2 2s 3s;
                    animation-fill-mode: forwards;
                }

                span:nth-child(3) {
                    background: url(./images/text_right.png) center center no-repeat;
                    width: .47rem;
                    height: .23rem;
                    background-size: cover;
                }
            }

            .bt_both {
                margin-top: .1rem;
                margin: auto;
                background: url(./images/sy.png) no-repeat;
                height: .7rem;
                width: 80%;
                background-size: 100% 100%;
                opacity: 0;
                animation: loadingsy 1s 5s;
                animation-fill-mode: forwards;
            }

            .bt_btm {
                display: flex;
                margin-top: .1rem;

                div {
                    opacity: 0;
                    height: 1.03rem;
                    width: 1.03rem;
                    background: url(./images/txb.png) no-repeat;
                    margin-left: .12rem;
                    background-size: cover;

                    img {
                        height: 1rem;
                        width: 1rem;
                        border-radius: 50%;
                        transform: translate(1.5px, 1.5px);
                    }
                }

                div:nth-child(1) {
                    animation: loadinghead 1s 5s;
                    animation-fill-mode: forwards;
                }

                div:nth-child(2) {
                    animation: loadinghead 1s 4.5s;
                    animation-fill-mode: forwards;
                }

                div:nth-child(3) {
                    animation: loadinghead 1s 4s;
                    animation-fill-mode: forwards;
                }
            }
        }
    }

    .p2_btm {
        position: absolute;
        left: 3%;
        bottom: 3%;
        height: 20%;
        font-size: .1rem;
        color: #fff;
        overflow: hidden;
        width: 97%;

        .btm_top {
            height: 50%;
            overflow: hidden;

            ul {
                overflow: hidden;
                // animation: loading4 20s linear infinite;
                animation: loading4 20s linear infinite;

                li {
                    span {
                        display: inline-block;
                        padding: .05rem .1rem;
                        margin: .05rem 0;
                        background-color: #7FCCA2;
                        opacity: 0.9;
                        border-radius: .1rem;
                    }
                }
            }
        }

        .btm_btm {
            width: 100%;
            height: .6rem;
            line-height: .5rem;
            input {
                height: .35rem;
                opacity: 0.5;
                border-radius: .3rem;
                padding-left: .1rem;
                font-size: .13rem;
                color: #fff;
                vertical-align: middle;
                border: 0;
                // outline: none;
                width: 70%;

                background-color: #222;
            }

            span {
                display: inline-block;
                margin-left: .1rem;
                width: .4rem;
                height: .4rem;
                background-color: #fff;
                vertical-align: middle;
            }

            span:nth-child(2) {
                background: url('./images/02_4.png');
                background-size: cover;
                animation: loading5 8s 2s infinite;
            }

            span:nth-child(3) {
                background: url('./images/02_5.png');
                background-size: cover;
                animation: loading5 8s 1s infinite;
            }
        }
    }

    .screen {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 3;
        top: 0;
        left: 0;
    }

    .greeting {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1.1rem;
        background-color: #fff;
        border-radius: .2rem .2rem 0 0;
        overflow: hidden;
        z-index: 4;

        p {
            font-size: .15rem;
            margin-top: .09rem;

            input {
                font-size: .15rem;
                height: .35rem;
                width: 70%;
                margin: 0 .07rem 0 .1rem;
                vertical-align: middle;
                border-radius: .2rem;
                border: none;
                background-color: #f6f6f6;
                padding-left: .15rem;
                outline: none;

            }

            button {
                font-size: .15rem;
                color: #fff;
                height: .35rem;
                width: .8rem;
                border-radius: .2rem;
                border: 0;
                background-color: #ccc;
                vertical-align: middle;
            }

            .btnactive {
                background-color: #6BCCA2;
            }
        }

        p:nth-child(1) {
            margin-top: .15rem;
        }
    }

    .active {
        background-color: #000;
        opacity: 0.7;
    }
}